<template>
	<view class="mpBuyTickets">
		<view class="checkTicketBox" v-if="ticketAllData && ticketData">
			<view class="ticketCard">
				<view class="ticketHeader">
					<view class="noticeBar"> {{ticketData.startPortName}}-{{ticketData.arrivePortName}}
						<view class="status" v-if="ticketData.ticketStatus =='03' || ticketData.ticketStatus =='04'">
							<view class="statusBox">
								{{ticketData.ticketStatus == '03' ? '已改签' : ticketData.ticketStatus == '04' ? '已退票' : ''}}
							</view>
						</view>
					</view>
					<view class="ticketHeaderBox">
						<view class="ticketHeaderItem">
							<view class="itemLabel">
								订单号：
							</view>
							<view class="itemValue">
								{{ticketAllData.orderNo}}
							</view>
						</view>
						<view class="ticketHeaderItem right">
							<view class="itemLabel">
								验证码：
							</view>
							<view class="itemValue">
								{{ticketAllData.orderPassword}}
							</view>
						</view>
					</view>
				</view>
				<image class="lineImg" :src="imgUrl+'upload/img/ws_static/static/line.png'" mode="widthFix"></image>

				<view class="qrSection" v-if="ticketData">
					<view class="qrTips">
						{{ticketData.passengerName}}
					</view>
					<view class="qrType">
						{{ticketData.ticketTypeName}}
					</view>
					<view class="qrImg">
						<view class="canvas-container">
							<canvas id="qrcode" canvas-id="qrcode" style="width: 170px; height: 170px;"></canvas>
						</view>
					</view>
					<view class="changeBtn" v-if="ticketAllData.detailList && ticketAllData.detailList.length > 1">
						<image class="leftBtn" :src="imgUrl+'upload/img/ws_static/static/traffic/leftBtn.png'"
							mode="widthFix" @click="prevTicket"></image>
						<image class="rightBtn" :src="imgUrl+'upload/img/ws_static/static/traffic/rightBtn.png'"
							mode="widthFix" @click="nextTicket"></image>
					</view>
					<view class="numBox">
						<view class="spot" v-if="ticketAllData.detailList && ticketAllData.detailList.length > 0">
							<view class="spotItem" v-for="(item,index) in ticketAllData.detailList" :key="index"
								:class="{ active: codeIndex === index }">
							</view>
						</view>
					</view>
				</view>
				<view class="ticketInfo">
					<view class="infoItem">
						<view class="infoLabel">
							船名
						</view>
						<view class="infoValue">
							{{ticketData.shipName}}
						</view>
					</view>
					<view class="infoItem">
						<view class="infoLabel">
							航班日期
						</view>
						<view class="infoValue">
							{{ticketData.classDate}}
						</view>
					</view>
					<view class="infoItem">
						<view class="infoLabel">
							出发时间
						</view>
						<view class="infoValue">
							{{ticketData.departTime}}
						</view>
					</view>
					<view class="infoItem">
						<view class="infoLabel">
							票号
						</view>
						<view class="infoValue">
							{{ticketData.barCode}}
						</view>
					</view>
					<view class="infoItem">
						<view class="infoLabel">
							舱位/座位号
						</view>
						<view class="infoValue">
							{{ticketData.cabinName}}/{{ticketData.seatNo}}号
						</view>
					</view>
					<view class="infoItem">
						<view class="infoLabel">
							乘客
						</view>
						<view class="infoValue">
							{{ticketData.passengerName}}
						</view>
					</view>
				</view>
				<image class="bottomImg" :src="imgUrl+'upload/img/ws_static/static/ticket/bottomImg.png'"
					mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsDetail,
		addEleCouponOrders,
		getBdcRoute,
		getUserOrderList,
		getShipTicketInfo
	} from "@/api/mall";

	import {
		getShipTicketOrderDetail
	} from "@/api/ws";
	import UQRCode from "uqrcodejs"
	import DigitalClock from "./components/digital-clock/digital-clock.vue";
	import {
		GetUserIDQrCode
	} from "@/api/homePage";
	import Config from "@/config";
	export default {
		components: {
			DigitalClock
		},
		data() {
			return {
				tab: "check",
				selectedTypeIndex: 1, // 默认选中5元
				// 表单数据
				form: {
					specId: "", // 规格ID
					price: 0,
					quantity: 1,
				},
				// 线路数据
				routeInfo: null,
				// 区域和线路ID
				locationId: 2,
				routeId: 1,
				products: {},

				// 价格列表
				priceList: [],
				// 加载状态
				loading: true,
				//二维码相关参数
				modal_qr: false,
				url: "暂无数据", // 要生成的二维码值
				maskQRCode: true,
				intervalId: null,
				color: "#FF6B0D",
				// 线路数据 (从config.js移过来)
				routesData: {
					// 全部景区（默认）
					0: []
				},
				ticketList: [],
				codeIndex: 0,
				imgUrl: Config.imgUrl,
				checked: false, //协议
				showDesc: false,
				ticketData: null,
				ticketAllData: null,
				source:"",
			};
		},
		computed: {
			totalPrice() {
				return this.form.price * this.form.quantity;
			},
			formattedDate() {
				const now = new Date();
				const month = now.getMonth() + 1;
				const day = now.getDate();
				return `${month}月${day}日`;
			}
		},
		async onLoad(option) {
			this.OrderNo = option.OrderNo || "";
			this.source = option.source || "";
			// 获取路由参数中的线路ID和区域ID
			const routeId = parseInt(option.id || "1");
			const locationId = parseInt(option.locationId || "2"); // 默认东澳岛
			this.locationId = locationId;
			this.routeId = routeId;
			console.log("接收到的线路ID:", routeId, "区域ID:", locationId);

			await this.getTicketInfo();
			// await this.fetchRouteData();
		},
		mounted() {

		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			async getTicketInfo() {
				try {
					console.log("OrderNo =>", this.OrderNo);
					// const res = await getShipTicketInfo({
					// 	"OrderNo": this.OrderNo,
					// 	"IsRefresh": "Y"
					// });
					const res = await getShipTicketOrderDetail({
						"OrderNo": this.OrderNo,
						"IsRefresh": "Y",
						"source": this.source
					});
					console.log("获取船票订单详情res=>", res);
					if (res.code == 200) {
						this.ticketAllData = res.result
						if (res.result.detailList.length > 0) {
							this.ticketData = res.result.detailList[0]
							this.$nextTick(() => {
								this.showQrcode();
							});
						} else {
							this.ticketData = null
						}

					} else {
						this.ticketData = null
						this.ticketAllData = null;
					}
				} catch (e) {
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					});
				}
			},
			giveColor(type) {
				if (type == '分段票') {
					return '#9B5734'
				} else if (type == '单程票') {
					return '#00ACF4'
				} else if (type == '双程票') {
					return '#4285F4'
				} else if (type == '通票') {
					return '#30A8B5'
				} else if (type == '包票') {
					return '#FFAC15'
				} else if (type == '双日票') {
					return '#FF6B0D'
				} else if (type == '三日票') {
					return '#FA452D'
				} else {
					return '#333333'
				}
			},
			closeDesc() {
				this.showDesc = false;
			},
			openDesc() {
				this.showDesc = true;
				console.log("显示退票说明");
			},
			viewAgreement() {
				console.log("查看协议");
			},
			changeCheked() {
				this.checked = !this.checked;
			},


			async openQRCode() {
				this.maskQRCode = false;
			},



			// 展示二维码
			showQrcode() {


				// this.modal_qr = true;
				setTimeout(() => {
					this.ticketAllData.detailList.forEach((ticket, index) => {
						this.loadQRCode(this.ticketData.barCode);
					});
				}, 100);
			},

			loadQRCode(QrCode) {
				const code = QrCode;
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = code;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 170;
				// 设置二维码颜色
				qr.foregroundColor = '#333333';
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this);
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},


			// 上一张车票
			prevTicket() {
				if (this.codeIndex > 0) {
					this.codeIndex--;
				} else {
					this.codeIndex = this.ticketAllData.detailList.length - 1; // 切换到最后一张
				}
				this.ticketData = this.ticketAllData.detailList[this.codeIndex];
				console.log("当前船票数据 =>", this.ticketData);
				this.showQrcode(); // 刷新二维码
			},

			// 下一张车票
			nextTicket() {
				if (this.codeIndex < this.ticketAllData.detailList.length - 1) {
					this.codeIndex++;
				} else {
					this.codeIndex = 0; // 切换到第一张
				}
				this.ticketData = this.ticketAllData.detailList[this.codeIndex];
				console.log("当前船票数据 =>", this.ticketData);
				this.showQrcode(); // 刷新二维码
			},
		},
	};
</script>


<style lang="less" scoped>
	.mpBuyTickets {
		width: 100%;
		min-height: 100vh;
		background-color: #f7f8fa;
		box-sizing: border-box;
		padding: 30rpx;
		position: relative;
		// background-color: #EFF7FF;
		// background-color: #B6E8FE;
		background: linear-gradient(to bottom, #0783F4, #AFE8FF);

		.checkTicketBox {
			width: 100%;
			min-height: 600rpx;
			position: relative;
			z-index: 2;
			margin-bottom: 30rpx;

			.ticketCard {
				width: 100%;
				margin: 0 auto;
				position: relative;
				overflow: visible;

				.ticketHeader {

					background-color: #fff;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					overflow: hidden;

					.noticeBar {
						width: 100%;
						margin: 0 auto 20rpx auto;
						background: #F7F8FA;
						color: #333;
						font-size: 34rpx;
						// border-radius: 12rpx;
						padding: 30rpx 30rpx;
						letter-spacing: 1rpx;
						position: relative;
						z-index: 2;
						text-align: center;
						font-weight: 600;
						position: relative;

						.status {
							position: absolute;
							top: 0;
							right: 0;
							height: 100%;
							padding-right: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							.statusBox {
								border: 2rpx solid #ff0000;
								color: #ff0000;
								font-size: 24rpx;
								padding: 8rpx 15rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-weight: 500;
								border-radius: 10rpx;
							}
						}
					}

					.ticketHeaderBox {
						padding: 30rpx 30rpx 30rpx 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: flex-start;

						.ticketHeaderItem {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							&.right {
								justify-content: flex-end;
							}

							.itemValue {
								font-size: 28rpx;
								color: #90949C;
							}
						}
					}

				}

				.dashedLineWrap {
					position: relative;
					width: 100%;
					height: 40rpx;
					margin: 32rpx 0 0 0;
					display: flex;
					align-items: center;
					justify-content: center;

					.halfCircle {
						position: absolute;
						top: 50%;
						width: 40rpx;
						height: 40rpx;
						background: #f7f8fa;
						border-radius: 50%;
						z-index: 2;
						transform: translateY(-50%);

						&.left {
							left: -20rpx;
						}

						&.right {
							right: -20rpx;
						}
					}

					.dashedLine {
						width: 92%;
						margin: 0 auto;
						border-bottom: 2rpx dashed #999;
						height: 0;
						z-index: 1;
					}
				}

				.lineBox {
					width: 100%;

					// background-color: pink;

				}

				.lineImg {
					width: 100%;
					// height: 60rpx;
					display: block;
				}

				.qrSection {
					display: flex;
					flex-direction: column;
					align-items: center;
					// margin-top: 24rpx;
					position: relative;
					background-color: #fff;
					padding: 30rpx 0 50rpx 0;
					// border-bottom-left-radius: 20rpx;
					// border-bottom-right-radius: 20rpx;

					.qrTips {
						color: #333;
						font-size: 36rpx;
					}

					.qrImg {
						position: relative;
						z-index: 1;

						.canvas-container {
							position: relative;
							width: 170px;
							height: 170px;
						}



					}

					.changeBtn {
						display: flex;
						justify-content: space-between;
						width: 100%; // Adjust as needed
						position: absolute;
						top: 45%;

						.leftBtn,
						.rightBtn {
							width: 100rpx; // Adjust as needed
							height: 100rpx; // Adjust as needed
							padding: 20rpx 40rpx;
						}
					}

					.qrType {
						font-size: 34rpx;
						// font-weight: bold;
						padding: 20rpx 60rpx;
						color: #90949C;
						background-color: #F7F8FA;
						border-radius: 40rpx;
						margin: 20rpx 0 40rpx 0;
					}
				}


				.ticketInfo {
					border-top: 6rpx solid #F7F8FA;
					padding: 30rpx 30rpx 10rpx 30rpx;
					width: 100%;
					background-color: #fff;

					.infoItem {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 15rpx 0;

						.infoLabel {
							color: #64676C;
						}
					}

				}

				.bottomImg {
					width: 100%;
					display: block;
				}
			}
		}
	}


	.numBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 24rpx;

		.spot {
			display: flex;
			justify-content: center;
			margin-bottom: 20rpx;
			padding-top: 20rpx;

			.spotItem {
				width: 16rpx;
				height: 16rpx;
				background-color: #d8d8d8;
				border-radius: 50%;
				margin: 0 5rpx;

				&.active {
					background-color: #00aaff; // Active spot color
				}
			}
		}


	}

	.qrTip {
		color: #333;
		font-size: 26rpx;
		padding-top: 10rpx;
	}
</style>